<template>
  <el-container>
    <el-header style="margin:0px;padding:0px;width:100%">
      <el-row  :gutter="24">
        <el-col style="padding:0px;background-color:#87c9da;height-top:20px;float:left" :span="21">
          <div style="height:40%" class="grid">
            <h4>
              <i style="margin-left:40%;" class="el-icon-s-promotion"></i>
              公共文化体育设施系统欢迎您！！！</h4>
          </div>

        </el-col>
        <el-col style="padding:0px" :span="3">
          
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                {{this.user.username}}<i class="el-icon-s-custom el-icon--right"></i>
              </span>
              <el-dropdown-menu style="float:right" slot="dropdown">
                <el-dropdown-item command="userinfo">个人中心</el-dropdown-item>
                <el-dropdown-item command="order">订单中心</el-dropdown-item>
                <el-dropdown-item command="logout">注销登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
         
        </el-col>
    </el-row>
    </el-header>

    <el-main style="padding:0px;magin:0px; width:100%;height:100%">
      <div class="ml">
          <el-menu :default-active="this.$router.path" class="el-menu-demo" mode="horizontal" router>
            <el-menu-item index="pvenues">场馆</el-menu-item>
            <el-menu-item index="pmanagements">管理单位</el-menu-item>
            <el-menu-item index="pmap">地图服务</el-menu-item>
          </el-menu>


        </div>
      <router-view/>
    </el-main>
</el-container>
</template>

<script>
export default {
    data () {
      return {
          user: null
      }
    },
    created() {
        this.getUser()
    },
    methods: {
      menuClick(index) {
        this.$router.push(index)
      },

      handleCommand (command) {
        if (command=='logout') {
            this.$confirm('此操作将注销登录, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            //注销登录
            this.postRequest('/logout')
            //清空用户信息
            window.sessionStorage.removeItem('tokenStr')
            this.$router.replace('/welcome')
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作'
            });          
          });
        }else if (command=='userinfo'){
          this.$router.replace('/pownuser')
        }else if (command=='order'){
          this.$router.replace('/porder')
        }
      },

      //获取当前登录用户信息
      getUser() {
        this.getRequest('/user/info').then(resp => {
          this.user = resp
          // console.log(this.user)
        })
      }
    }
}
</script>

<style lang="less" scoped>
.el-header {
  // background-color: aqua;
  height: 100%;
 
}

.el-main {
  // background-color: aquamarine;
  height: 600px;
}

.el-col {
  background-color: #87c9da;
  // display: flex;
  padding-top: 20px;
  height: 59px;
  align-items: center;
}

.el-dropdown {
  margin-top: 20px;
}

.grid {
  width: 100%;
}

.el-menu-demo {
  height: 20%;
}
</style>>